<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        selsct();
        $(function () {

          $("#submit").click(function () {
              $(".tr1").remove();
              selsct();

          })

        })
        function selsct() {
            $("#tr").hide("normal");

            var url="/findDept.do";
            $.get(url,$("#form").serialize(),function (data) {

                $.each(data,function (index,element) {
                    var tr;
                    tr="<tr class='tr1'><td>"+element.ename+"</td> <td>"+element.mgr+"</td> <td>"+element.salary+"</td> <td>"+element.bonus+"</td> <td>"+element.dept_id+"</td></tr>";

                    $("#table").append(tr);

                    // 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
                    // 对象.remove():将对象删除掉
                })
            },"json")
            $("#tr").show("normal");
        }
    </script>
</head>
<body>
<div class="container">
    <div class="row">
    <form class="form-inline" action="/findDept.do" method="post"  id="form">
        <div class="form-group">
            <label for="exampleInputName2">员工</label>
            <input name="ename"  type="text" class="form-control" id="exampleInputName2" placeholder="请输入员工名称">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail2">领导</label>
            <input name="mgr" type="text" class="form-control" id="exampleInputEmail2" placeholder="请输入上级领导名称">
        </div>
        <div class="form-group">
            <label for="exampleInputName2">员工</label>
            <input name="salary" type="text" class="form-control" id="exampleInputName3" placeholder="请输入部门名称">
        </div>

        <button type="button" class="btn btn-default btn-group">新增</button>
    </form>
        <button id="submit" type="submit" class="btn btn-default btn-danger">查询</button>
</div>
    <div class="row">
<table id="table"  class="table table-bordered table-hover">
    <tr id="tr">
        <th>员工名称</th>
        <th>上级领导名称</th>
        <th>员工工资</th>
        <th>年终奖金</th>
        <th>所在部门</th>
    </tr>

</table>
    </div>
    <div class="row">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <!--<li><a href="#">1</a></li>-->
                <!--<li><a href="#">2</a></li>-->
                <!--<li><a href="#">3</a></li>-->
                <!--<li><a href="#">4</a></li>-->
                <!--<li><a href="#">5</a></li>-->
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>